<!--
 * @Author: 曹曙光
 * @Date: 2023-05-17 11:09:02
 * @LastEditors: 曹曙光
 * @LastEditTime: 2023-05-18 10:04:54
 * @FilePath: \百度地图学习\baidumap\src\components\HelloWorld.vue
 * @Description: 
 * 
-->
<template>
  <div class="home">
    <!--创建地图容器-->
    <div id="container" class="allmap" ></div>
  </div>
</template>

<script>
import { BMPGL } from './bmpgl';
export default {
  name: 'HelloWorld',
  props: {
    height: {
      type: String,
      default: '100%',
    },
  },
  data() {
    return {
      ak: 'osOkDINBiZUK4kXZr9xhxXovH2zPlR4W', // 百度的地图密钥
      myMap: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 传入密钥获取地图回调。
      BMPGL(this.ak)
        .then((BMapGL) => {
          var map = new BMapGL.Map('container', {
            enableRotate: true,
            enableTilt: true,
          });
          var point = new BMapGL.Point(114.695888, 27.825118); //- 创建点坐标  -分宜融媒体
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);
          map.setHeading(64.5); //-设置地图旋转角度
          map.setTilt(35); //-设置地图的倾斜角度

          // 设置覆盖物
          var point1 = new BMapGL.Point(114.695888, 27.825118);
          var myIcon = new BMapGL.Icon(
            require('../../../assets/fy/map-icon.png'),
            new BMapGL.Size(50, 50),
            {
              // 指定定位位置。
              // 当标注显示在地图上时，其所指向的地理位置距离图标左上
              // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
              // 图标中央下端的尖角位置。
              anchor: new BMapGL.Size(10, 25),
              // 设置图片偏移。
              // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
              // 需要指定大图的偏移位置，此做法与css sprites技术类似。
              // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
            }
          );
          var marker1 = new BMapGL.Marker(point1, { icon: myIcon });
          map.addOverlay(marker1);

          map.setMapStyleV2({
            styleJson: [
              {
                featureType: 'water', // 水域
                elementType: 'geometry', // 几何图形
                stylers: {
                  color: '#1a2b3c', // 深蓝色，增加层次感
                },
              },
              {
                featureType: 'land', // 陆地
                elementType: 'geometry',
                stylers: {
                  color: '#040d2a', // 深灰色，适合暗黑主题
                },
              },

              {
                featureType: 'road', // 道路
                elementType: 'labels.text.fill', // 道路标签文字
                stylers: {
                  color: '#cccccc', // 浅灰色文字，增强可读性
                },
              },

              {
                featureType: 'building', // 建筑物
                elementType: 'labels.text.fill', // 建筑物标签文字
                stylers: {
                  color: '#ffffff', // 白色文字，清晰可见
                },
              },
              // 天空
              {
                featureType: 'sky', // 天空
                elementType: 'geometry',
                stylers: {
                  color: '#000000', // 黑色，增加层次感
                },
              },
              {
                featureType: 'label', // 标签
                stylers: {
                  color: '#e0e0e0', // 浅灰色文字，适合暗黑背景
                },
              },

              {
                featureType: 'poi', // 兴趣点
                stylers: {
                  color: '#d1d1d1', // 浅灰色文字，增强可读性
                },
              },
            ],
          });
          // -添加文本覆盖物
          var point4 = new BMapGL.Point(114.695888, 27.825118);
          var point = new BMapGL.Point(114.695888, 27.825118);
          var content = '分宜路侧停车点位';
          var label = new BMapGL.Label(content, {
            // 创建文本标注
            position: point4, // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
          });

          label.setStyle({
            // 设置label的样式
            color: '#000',
            fontSize: '30px',
            border: '2px solid #1E90FF',
          });
          map.addOverlay(label);
          label.addEventListener('click', function () {
            alert('分宜路侧停车');
          });

          // -向地图中添加信息窗口
          var opts5 = {
            width: 250, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: '分宜路侧停车点位信息', // 信息窗口标题
          };

          // -打开窗口事件
          marker1.addEventListener('click', function () {
            var sContent = `<div style="color:pink">分宜路侧停车点位</div>
            <a>外部连接</a>
            <image src='../../../assets/fy/map-icon.png'></image>
          `;
            var infoWindow = new BMapGL.InfoWindow(sContent, opts5); // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
          });

          //#region 设置地图控件样式
          // -设置控件停靠的位置 和偏移的位置
          var opts = {
            anchor: 'B_ANCHOR_TOP_RIGHT',
            offset: new BMapGL.Size(50, 5),
          };

          var scaleCtrl = new BMapGL.ScaleControl(opts); //- 添加比例尺控件
          map.addControl(scaleCtrl);
          var zoomCtrl = new BMapGL.ZoomControl(); //- 添加缩放控件
          map.addControl(zoomCtrl);
          //#endregion
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="css" scoped>
.allmap {
  width: 100%;
  height: 5.625rem !important;
}
</style>
